<template>
    <div v-if="list.length" class="history_search">
        <div class="head flex-between flex-middle">
            <div class="left">搜索历史</div>
            <van-icon name="delete" size=".6rem" class="icon" @click="delHistory"/>
        </div>
        <Bscroll :scrollX="true" class="scroll-wrapper">
            <div class="content list">
                <router-link :to="`search_result?q=${searchkey}`" tag="div" v-for="(searchkey,index) in list" :key="searchkey+index" class="item">{{searchkey}}</router-link>
            </div>
        </Bscroll>
    </div>
</template>

<script>
//components
import Bscroll from '@/components/BScroll'
export default {
    props:{
        list:{
            type:Array,
            default:[]
        }
    },
    components:{
        Bscroll
    },
    methods:{
        delHistory(){
            this.$emit('del')
        }
    }
}
</script>

<style lang="scss" scoped>
.history_search{
    color: $higColor;
    margin-top: 10px;
    .left{
        font-size: 15px;
    }
    .icon{
        color: $senColor;
    }
}
.list{
    margin-top: 10px;
    .item{
        display: inline-block;
        margin-right: 10px;
        font-size: 12px;
        background: $inputBg;
        height: 30px;
        line-height: 30px;
        border-radius: 15px;
        padding: 0 15px;
        &:last-child{
            margin-right: 0;
        }
    }
}
.scroll-wrapper{
    white-space:nowrap;
    overflow: hidden;
    .content{
        display:inline-block;
    }
}
</style>